<template>
	<view>
		<navbar></navbar>
		<view class="container">
			<view class="widget-body">
				<form @submit="formSubmit">
					<!-- 提现佣金 -->
					<view class="widget widget__capital m-top20 b-f dis-flex flex-dir-column">
						<view class="widget__capital-title dis-flex flex-y-center col-9 f-30">
							{{ words.withdraw_apply.words.money.value }}
						</view>
						<view class="capital__item dis-flex flex-y-center f-bold f-60">
							<view>￥</view>
							<view class="item__right flex-box">
								<input name="money" :placeholder="words.withdraw_apply.words.money_placeholder.value"
									class="f-60" placeholder-class="f-30"></input>
							</view>
						</view>
						<view class="capital__item">
							<!-- 可提现佣金 -->
							<!-- <view class="f-30 col-9 f-bold">
								{{ words.withdraw_apply.words.capital.value }}{{ dealer.money }}元
							</view> -->
							<view class="f-30 col-9 f-bold">
								可提现{{ dealer.money }}元
							</view>
						</view>
						<view class="blance" @tap.stop.prevent="toggle('bottom')">
							<view class="title">
								选择提现银行卡
							</view>
							<view class="right">
								{{choseBankDesc.linked_brbankname}}
							</view>
						</view>

					</view>
					<!-- 最低提现金额 -->
					<!-- <view class="capital__lowest m-top20 f-24 col-7 t-r">
						{{ words.withdraw_apply.words.min_money.value }}{{ settlement.min_money }}元
						</view> -->
					<view class="tips m-top20 f-24 col-7">注：提现金额将转入选择的银行卡</view>
					<view class="tips m-top20 m-right10 f-24 col-7">注：当天收入金额次日可提现，每次提现扣除2元手续费</view>
					<!-- 提现方式 -->
					<view v-if="!lianlian.widthdraw" class="widget widget__form m-top20 b-f dis-flex flex-dir-column">
						<view v-if="1 < settlement.pay_type.length" class="form__title col-9 f-30">提现方式</view>
						<view class="form__box">
							<template v-for="(item, index) in settlement.pay_type" v-key="index">
								<template v-if="10 == item">
									<!-- 微信支付 -->
									<view class="form__field dis-flex flex-y-center" @click="toggleChecked"
										data-payment="10">
										<view class="form__radio dis-flex flex-y-center">
											<text v-if="1 < settlement.pay_type.length"
												:class="'radio__icon iconfont icon-radio' + (10 == payment ? ' col-m' : ' col-bb')"></text>
											<text class="f-30 f-bold">微信支付</text>
										</view>
									</view>
								</template>
								<template v-if="20 == item">
									<!-- 支付宝 -->
									<view class="form__field dis-flex flex-y-center" @click="toggleChecked"
										data-payment="20">
										<view class="form__radio dis-flex flex-y-center">
											<text v-if="1 < settlement.pay_type.length"
												:class="'radio__icon iconfont icon-radio' + (20 == payment ? ' col-m' : ' col-bb')"></text>
											<text class="f-30 f-bold">支付宝</text>
										</view>
									</view>
									<template v-if="20 == payment">
										<view class="form__field dis-flex flex-y-center">
											<view class="field-input flex-box">
												<input name="alipay_name" placeholder="请输入姓名"></input>
											</view>
										</view>
										<view class="form__field dis-flex flex-y-center">
											<view class="field-input flex-box">
												<input name="alipay_account" placeholder="请输入支付宝账号"></input>
											</view>
										</view>
									</template>
								</template>
								<template v-if="30 == item">
									<!-- 银行卡 -->
									<view class="form__field dis-flex flex-y-center" @click="toggleChecked"
										data-payment="30">
										<view class="form__radio dis-flex flex-y-center">
											<text v-if="1 < settlement.pay_type.length"
												:class="'radio__icon iconfont icon-radio' + (30 == payment ? ' col-m' : ' col-bb')"></text>
											<text class="f-30 f-bold">银行卡</text>
										</view>
									</view>
									<template v-if="30 == payment">
										<view class="form__field dis-flex flex-y-center">
											<view class="field-input flex-box">
												<input name="bank_name" placeholder="请输入姓名" value=""></input>
											</view>
										</view>
										<view class="form__field dis-flex flex-y-center">
											<view class="field-input flex-box">
												<input name="bank_account" placeholder="请输入开户行名称/地址" value=""></input>
											</view>
										</view>
										<view class="form__field dis-flex flex-y-center">
											<view class="field-input flex-box">
												<input name="bank_card" placeholder="请输入银行卡号" value=""></input>
											</view>
										</view>
									</template>
								</template>
							</template>
						</view>
					</view>
					<view v-if="lianlian.validationSms"
						class="widget widget__form m-top20 b-f dis-flex flex-dir-column">
						<view class="form__box">
							<view class="form__field dis-flex flex-y-center">
								<view class="form__radio dis-flex flex-y-center">
									<text class="f-30 f-bold">验证码</text>
								</view>
							</view>
							<view class="form__field dis-flex flex-y-center">
								<view class="field-input flex-box">
									<input name="sms" type="number" maxlength="6" placeholder="请输入验证码"
										v-model="lianlian.verifyCode"></input>
								</view>
							</view>
						</view>
					</view>
					<!-- 提交申请 -->
					<view class="form-submit">
						<button formType="submit"
							:disabled="disabled">{{ words.withdraw_apply.words.submit.value }}</button>
					</view>
					<view class="apply_record" @tap.stop.prevent="applyRecord">
						提现记录
					</view>
				</form>
				<!-- 选择充值银行卡 -->
				<uni-popup ref="popup" background-color="#fff" >
					<view class="chose-bank">
						<view class="title">
							选择提现银行卡
						</view>
						<view class="bank-list">
							<view class="bank" v-for="item in bankList" :key="item.linked_acctno" @tap.stop.prevent="choseBank(item)">
								<!-- <view class="bankled"></view> -->
								<view class="">
									<view class="">{{item.linked_brbankname}}({{item.linked_acctno_pass}})</view>
									<view class="des">立即到账</view>
								</view>
								
							</view>
						</view>
						
					</view>
				</uni-popup>
			</view>
		</view>
		<security-password :show="securityPassword.show" @close="onToggleSecurityPassword"
			@success="onSecurityPasswordSuccess"></security-password>
	</view>
</template>

<script>
	const app = getApp();
	import navbar from "@/components/navbar/navbar";
	export default {
		components: {
			navbar
		},
		data() {
			return {
				isData: false,
				words: {
					withdraw_apply: {
						title: {
							default: "",
							value: ""
						},
						words: {
							capital: {
								default: "",
								value: ""
							},
							min_money: {
								default: "",
								value: ""
							},
							money: {
								default: "",
								value: ""
							},
							money_placeholder: {
								default: "",
								value: ""
							},
							submit: {
								default: "",
								value: ""
							}
						}
					}
				},
				payment: 20,
				background: '',
				dealer: {},
				settlement: {
					pay_type: []
				},
				disabled: false,
				withdrawParams: null,
				securityPassword: {
					show: false,
				},
				lianlian: { // 通过连连提现
					widthdraw: true,
					validationSms: false,
					verifyCode: '',
					data: {}
				},
				bankList: [],	//银行卡列表
				choseBankDesc: {
					bankNo: '',
					linked_brbankname: '请选择提现银行卡'
				}, 	
			}
		},
		onShow: function() {
			// 获取分销商提现信息
			this.getDealerWithdraw();
			this.getBankCard();
		},
		methods: {
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			dialogClose() {
				this.$refs.popup.close()
			},
			// 选择银行卡
			choseBank(item){
				console.log(item)
				this.choseBankDesc.bankNo = item.linked_acctno
				this.choseBankDesc.linked_agrtno = item.linked_agrtno
				this.choseBankDesc.linked_brbankname = item.linked_brbankname +'(' + item.linked_acctno_pass + ')'
				this.dialogClose()
			},
			/**
			 * 获取分销商提现信息
			 */
			getDealerWithdraw: function() {
				app._get('user.dealer/withdraw', {}, (res) => {
					let {
						background,
						dealer,
						settlement,
						words
					} = res.data;

					// 设置当前页面标题
					uni.setNavigationBarTitle({
						title: words.withdraw_apply.title.value
					});
					//  默认提现方式
					// settlement.pay_type = [10, 20, 30];
					// settlement.pay_type = [30];
					if (0 < settlement.pay_type.length) {
						this.payment = settlement.pay_type[0];
					}
					this.isData = true;
					this.background = background;
					this.dealer = dealer;
					this.settlement = settlement;
					this.words = words;
				});
			},
			// 获取绑定银行卡
			getBankCard(){
				let _this = this
				app._post_form('User/myAcctlist', {}, function(result) {
					if (1 == result.code) {
						_this.bankList = result.data //银行卡列表
					}
				}, null, function() {
					// 解除按钮禁用
					_this.disabled = false;
				});
			},
			/**
			 * 提交申请
			 */
			formSubmit: function(e) {
				let _this = this,
					values = e.detail.value,
					
					words = _this.words.withdraw_apply.words;
				if(this.choseBankDesc.bankNo == '' || this.choseBankDesc.bankNo == null){
						app.showError( this.choseBankDesc.linked_brbankname);
					return false;
				}
				// 验证可提现佣金
				if (_this.dealer.money <= 0) {
					app.showError('当前没有' + words.capital.value);
					return false;
				}
				// 验证提现金额
				if (!values.money || values.money.length < 1) {
					app.showError('请填写' + words.money.value);
					return false;
				}
				if (!this.lianlian.widthdraw) {
					// 提现方式
					values['pay_type'] = _this.payment;
				}
				
				values['linked_acctno'] = _this.choseBankDesc.bankNo;
				values['linked_agrtno'] = _this.choseBankDesc.linked_agrtno;
				_this.withdrawParams = values;
				if (!_this.lianlian.validationSms) {
					// 先输入安全密码
					_this.onToggleSecurityPassword();
				} else {
					// 输入连连密码后，直接提现
					_this.requestLianlianSmsWithdraw();
				}
			},

			// 申请提现
			requestWithdraw: function() {
				if (!this.lianlian.widthdraw) {
					this.requestCommonWithdraw();
				} else {
					this.requestLianlianWithdraw();
				}
			},

			// 连连提现
			requestLianlianWithdraw: function() {
				let _this = this;
				// 按钮禁用
				_this.disabled = true;
				// 数据提交
				app._post_form('user.dealer.withdraw/submit_new', {
					data: JSON.stringify(_this.withdrawParams),
					linked_acctno:_this.choseBankDesc.bankNo
				}, function(result) {
					if (1 == result.code) {
						let token = result.data.token;
						if (0 == token) {
							// 提现申请成功
							app.showError(result.msg, () => {
								wx.navigateTo({
									url: './list',
								})
							});
						} else {
							// 需要再次进行短信验证码校验
							_this.lianlian.validationSms = true;
							_this.lianlian.data = result.data;
							app.showToast(result.msg);
						}
					}
				}, null, function() {
					// 解除按钮禁用
					_this.disabled = false;
				});
			},
			applyRecord(){
				wx.navigateTo({
					url: './list',
				})
			},
			// 连连验证码提现
			requestLianlianSmsWithdraw: function() {
				let _this = this;
				// 按钮禁用
				_this.disabled = true;
				// 数据提交
				app._post_form('user.dealer.withdraw/validationSms', {
					data: JSON.stringify(Object.assign({}, _this.lianlian.data, {
						verify_code: _this.lianlian.verifyCode
					}))
				}, function(result) {
					// 提现申请成功
					app.showError(result.msg, () => {
						_this.resetLianlian();
						wx.navigateTo({
							url: './list',
						})
					});
				}, null, function() {
					// 解除按钮禁用
					_this.disabled = false;
				});
			},

			resetLianlian() {
				this.lianlian.validationSms = false;
				this.lianlian.verifyCode = '';
				this.lianlian.data = {};
			},

			// 其他提现
			requestCommonWithdraw: function() {
				let _this = this;
				// 按钮禁用
				_this.disabled = true;
				// 数据提交
				app._post_form('user.dealer.withdraw/submit', {
					data: JSON.stringify(_this.withdrawParams)
				}, function(result) {
					// 提交成功
					// console.log(result);
					app.showError(result.msg, () => {
						wx.navigateTo({
							url: './list',
						})
					});
				}, null, function() {
					// 解除按钮禁用
					_this.disabled = false;
				});
			},

			/**
			 * 切换提现方式
			 */
			toggleChecked: function(e) {
				this.payment = e.currentTarget.dataset.payment;
			},
			//////// 安全密码回调 ////////
			// 切换安全密码弹窗的显示
			onToggleSecurityPassword: function() {
				this.securityPassword.show = !this.securityPassword.show;
			},
			// 密码输入正确
			onSecurityPasswordSuccess: function() {
				this.requestWithdraw();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.col-bb {
		color: #bbb;
	}

	/* 提现金额 */

	.widget__capital {
		padding: 0 30rpx;
	}

	.widget__capital .widget__capital-title {
		height: 46px;
		padding: 0;
		box-sizing: border-box;
	}

	.widget__capital .capital__item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f7f7f7;
		box-sizing: border-box;
	}

	.f-60 {
		font-size: 60rpx;
	}

	.widget__capital .capital__item:last-child {
		border-bottom: none;
	}
	.blance{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 20rpx 0;
	}
	.blance .title{
		font-size: 28rpx;
	}
	.blance .right{
		font-size: 28rpx;
		color: #9f9f9f;
		// margin-right: 40rpx;
	}
	.blance .right::after{
		content: '\e601' !important;
		font-family: 'dy-iconfont';
		color: $uni-text-color-grey;
		font-size: 34rpx;
		// position: absolute;
		// top: 50rpx;
		// right: 20rpx;
		transform: translateY(-50%);
	}

	.capital__lowest {
		padding-right: 20rpx;
		box-sizing: border-box;
	}

	.tips {
		padding-left: 30rpx;
		box-sizing: border-box;
	}

	/* 提现方式 */

	.widget__form {
		padding: 10rpx 0 20rpx 0;
	}

	.widget__form .form__title {
		padding: 16rpx 35rpx;
		border-bottom: 1rpx solid #f7f7f7;
	}

	.widget__form .form__box {
		padding: 0rpx 30rpx;
	}

	.widget__form .form__field {
		height: 90rpx;
		padding: 0;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.widget__form .form__field .radio__icon {
		font-size: 38rpx;
		margin-right: 12rpx;
	}

	.widget__form .form__field .field-input input {
		background-color: #f9f9f9;
		height: 70rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	/* 提交申请 */

	.form-submit {
		margin-top: 80rpx;
		padding: 0 30rpx;
		color: #fff;
	}

	.form-submit button {
		font-size: 32rpx;
		background: linear-gradient(270deg,#1a1a1a,#666);
		color: #fff;
		border-radius: 15rpx;
	}

	.form-submit button[disabled] {
		background-color: #FFF !important;
		color: $uni-text-color-inverse !important;
		opacity: 0.5;
	}
	.apply_record{
		width: 200rpx;
		text-align: center;
		font-size: 28rpx;
		color: #0BAFE6;
		position: absolute;
		left: 50%;
		margin-left: -100rpx;
		bottom: 50rpx;
	}
	.chose-bank{
		// border-radius: 50rpx;
		background-color: #f7f7f7;
	}
	.chose-bank .title{
		font-size: 34rpx;
		text-align: center;
		padding: 20rpx 0;
		border-bottom: #d6d6d6 1rpx solid;
	}
	.chose-bank .bank-list{
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: #fff;
		border-radius: 50rpx 50rpx 0 0;
		padding: 20rpx;
		padding-top: 40rpx;
		margin-top: 10rpx;
	}
	.chose-bank .bank-list .bank{
		display: flex;
		flex-direction: row;
		justify-content: center;
		height: 100rpx;
		margin-top: 10rpx;
	}
	.chose-bank .bank-list .bankled{
		width: 30rpx;
		height: 30rpx;
		background-color: #00aaff;
		border-radius: 30rpx;
	}
	.chose-bank .bank-list .bank .des{
		font-size: 28rpx;
		color: #9f9f9f;
	}
</style>
